<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
	<%@include file="../include_new.jsp"%>
</head>
<body id="z_body">
	<div class="panel">
		<div class="panel-heading">
			<i class="icon icon-list"></i> 工作台配置管理
		</div>
		<div class="panel-body">
			<!-- query form -->
			<form id="form_1">
				<div class="row">
					<div class="col-xs-2">
						<div class="input-group">
							<span class="input-group-addon">开始时间</span>
							<input class="form-control time" name="startTime"/>
						</div>
					</div>
					<div class="col-xs-2">
						<div class="input-group">
							<span class="input-group-addon">结束时间</span>
							<input class="form-control time" name="endTime"/>
						</div>
					</div>
					<div class="col-xs-2">
						<div class="input-group">
							<span class="input-group-addon">关键字</span>
							<input class="form-control"  name="keyword" placeholder="IP/机器名/工作台号/工作台名称" value=""/>
						</div>
					</div>
					<shiro:hasRole name="admin">
					<div class="col-xs-3">
						<div class="input-group">
							<span class="input-group-addon">所属单位</span>
							<input class="form-control" name="dwdm" value="" type="hidden"/>
							<input class="form-control" value="" data_tree="{type:'organ_nb'}"/>
						</div>
					</div>
					</shiro:hasRole>
					<div class="col-xs-3" style="text-align: right;">
						<a class="btn btn-primary" id="btn_query" onclick="getPage()"><i class="icon icon-search"></i> 查询</a>
						<a class="btn btn-primary" data-toggle='modal' data-size='lg' data-iframe="../gztpzxx/form?act=add" data-title="新增工作台配置"><i class="icon icon-plus"></i> 新增</a>
					</div>
				</div>
			</form>
		</div>
	</div>
	
	<div id="app">
		<!-- pager -->
		<ul class="pager" style="margin:-7px 0 5px 0; float:right;">
			<li onclick="firstPage()" class="previous" v-bind:class="pageNum > 1 ? '' : 'disabled'"><a>首页</a></li>
			<li onclick="prevPage()" v-bind:class="pageNum > 1 ? '' : 'disabled'"><a>上页</a></li>
			<li onclick="nextPage()" v-bind:class="pageNum < pages ? '' : 'disabled'"><a>下页</a></li>
			<li onclick="lastPage()" class="next" v-bind:class="pageNum < pages ? '' : 'disabled'"><a>尾页</a></li>
		</ul>
		<span v-show="total != null" style="float:right; padding-right:1em;">第{{pageNum}}/{{pages}}页, 共{{total}}条</span>
		
		<!-- data table -->
		<table class="table table-striped table-hover table-bordered" id="list">
			<tr>
				<th>更新时间</th>
				<th>机器IP</th>
				<th>机器名称</th>
				<th>工作台号</th>
				<th>工作台名称</th>
				<th>工作台所属组</th>
				<th>所属单位</th>
				<th>操作</th>
			</tr>
			<tr v-for="one in list">
				<td>{{new Date(one.gxsj).format()}}</td>
				<td>{{one.jqip}}</td>
				<td>{{one.jqmc}}</td>
				<td>{{one.gzth}}</td>
				<td>{{one.gztmc}}</td>
				<td>{{one.gztzmc}}</td>
				<td>{{one.ssdwmc}}</td>
				<td>
					<a v-on:click="cfg(one.jqip)">工作配置项</a>&nbsp;
					<a v-on:click="toUpdate(one.jqip)">修改</a>&nbsp;
					<a v-on:click="deletes(one.jqip)">删除</a>
				</td>
			</tr>
		</table>
	</div>
	
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			pageSize: 10,
			pageNum: 1,
			pages: null,
			list: [],
			total: null
		}
	});
	
	function getPage() {//分页查询
		tool.query("../gztpzxx/getPage?pageSize="+vm.pageSize+"&pageNum="+vm.pageNum, $("#form_1").serialize(), function(data) {
			for(var key in data.data) {
				vm[key] = data.data[key];
			}
		});
	}
	
	function toUpdate(id) {//打开修改页面
		new $.zui.ModalTrigger({
			iframe: "../gztpzxx/form?act=update&id="+id,
			size:"lg", title:"工作台信息修改"
		}).show();
	}
	
	function cfg(id) {//打开配置
		new $.zui.ModalTrigger({
			iframe: "../gztpzxx/cfg?id="+id,
			size:"lg", title:"工作台配置"
		}).show(); 
	}
	
	function deletes(id) {//删除
		myzui.confirm("确认要删除吗?", function(){
			tool.query("../gztpzxx/delete", {id:id}, function(data) {
				getPage();
			});
		});
	}
	// 选择时间和日期
	$(".time").click(function() {
		WdatePicker({
			dateFmt : "yyyy-MM-dd HH:mm"
		});
	});
	getPage();
</script>
</body>
</html>